<template>
  <div class="container">

    <baidu-map class="box" :center="center" :scrollWheelZoom="true" :zoom="14"  @moveend="getCenters">
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
          <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
          <bm-marker v-for="item in coordinate1"
                     :position="{lng: item.parkLong, lat: item.parkLati}"
                     :icon="{url: '../src/assets/map_images/markersfull.png', size: {'width':30,'height':50}}"
                     :offset="{'width':0,'height':0}"
                     @click="openInfo(item)">
            <!--<bm-label :content="item.remain==null?'0': item.remain" :zIndex="10000" :labelStyle="labelStyle"-->
                      <!--:offset="{width: 0, height: 0}"/>-->
          </bm-marker>
          <!--<bm-marker v-for="item in coordinate2"-->
                     <!--:position="{lng: item.parkLong, lat: item.parkLati}"-->
                     <!--:icon="{url: '../src/assets/map_images/markersidle.png', size: {'width':30,'height':50}}"-->
                     <!--:offset="{'width':0,'height':0}"-->
                     <!--@click="openInfo(item)">-->
            <!--<bm-label :content="item.remain.toString()" :zIndex="10000" :labelStyle="labelStyle"-->
                      <!--:offset="{width: 0, height: 0}"/>-->
          <!--</bm-marker>-->
          <!--<bm-marker v-for="item in coordinate3"-->
                     <!--:position="{lng: item.parkLong, lat: item.parkLati}"-->
                     <!--:icon="{url: '../src/assets/map_images/markersoffduty.png', size: {'width':30,'height':50}}"-->
                     <!--:offset="{'width':0,'height':0}"-->
                     <!--@click="openInfo(item)">-->
            <!--<bm-label :content="item.remain.toString()" :zIndex="10000" :labelStyle="labelStyle"-->
                      <!--:offset="{width: 0, height: 0}"/>-->
          <!--</bm-marker>-->
          <bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show"
                          @close="infoWindowClose" @open="infoWindowOpen">
            <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>
            <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">停车场编号：{{this.infoWindow.parkNo}}</p>
            <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>
            <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">车场类型：{{this.infoWindow.type==1?"道路停车场":"公共停车场"}}</p>
            <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">
              停车位信息：{{this.infoWindow.totalNum}}个泊位，{{this.infoWindow.surplus}}个可用</p>
            <!--<p style="margin:0 0 5px 0;padding: 0;font-size: 14px">-->
              <!--最后上传时间: 2018-6-13:14:14:14</p>-->
          </bm-info-window>
        </baidu-map>
  </div>

</template>

<script>
/* eslint-disable */
import ParkInfoForm from "./parkInfoChild/parkInfoForm";
import ParkInfoTable from "./parkInfoChild/parkInfoTable";
import { ParkMapInfo } from "../../api/parkingResources/parkingMapInfo";

export default {
  components: {},
  created() {
    ParkMapInfo().then(res => {
      this.coordinate1 = res;
    });
  },
  data() {
    return {
      show: false,
      center: {
        lng: 117.536943,
        lat: 36.702987
      },
      infoWindow: {
        longirude: 0,
        latitude: 0,
        title: "",
        parkNo: "",
        dw: "",
        chargeType: "",
        totalNum: "",
        surplus: "",
        type: ""
      },
      coordinate1: [
        // {  parkLong: 117.541803, parkLati: 36.69844,placenum:"79", parkname:'教导大队停车场',parkNo:"1001",
        //   parkOrg:'章丘停车公司',total:'301',remain:'221'},
        // {  parkLong: 117.5367, parkLati: 36.6908 ,placenum:"89",parkname:'电视台停车场',parkNo:"1002",
        //   parkOrg:'章丘停车公司',total:'304',remain:'225'}
      ],
      // coordinate2: [
      //   {  parkLong: 117.533251, parkLati: 36.701536 ,placenum:"59",parkname:'千禧龙北停车场',parkNo:"1003",
      //     parkOrg:'章丘停车公司',total:'307',remain:'211'},
      //   {  parkLong: 117.531203, parkLati:36.698816,placenum:"36",parkname:'市政租赁处停车场',parkNo:"1004",
      //     parkOrg:'章丘停车公司',total:'309',remain:'220'},
      // ],
      // coordinate3: [
      //   {  parkLong: 117.53591, parkLati:36.709001,placenum:"39",parkname:'电瓷场停车场',parkNo:"1005",
      //     parkOrg:'章丘停车公司',total:'321',remain:'201'}
      // ],
      labelStyle: {
        backgroundColor: "transparent",
        color: "#fff",
        border: "0px",
        fontSize: "14px",
        fontWeight: "300",
        zIndex: 100000,
        width: "28px",
        height: "37px",
        textAlign: "center",
        lineHeight: "33px"
      }
    };
  },
  methods: {
    getCenters(val) {
      const { lng, lat } = val.target.getCenter();
      this.center.lng = lng;
      this.center.lat = lat;
    },
    // 打开信息窗体
    openInfo(val) {
      this.infoWindow.title = val.parkName;
      this.infoWindow.longirude = val.parkLong;
      this.infoWindow.latitude = val.parkLati;
      this.infoWindow.parkNo = val.parkNo;
      this.infoWindow.dw = val.parkOrg;
      this.infoWindow.totalNum = val.total;
      this.infoWindow.type = val.type;
      this.infoWindow.surplus = val.remain;
      this.show = true;
    },
    infoWindowClose(e) {
      this.show = false;
    },
    infoWindowOpen(e) {
      this.show = true;
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
  padding: 20px;
  width: 100%;
  height: 90vh;
}
.box {
  width: 100%;
  height: 100%;
}
</style>
